<template>
	<view>
		<!-- 技师列表 v-if="project.length!=0"-->
		<view  class="user_item fx-row-sb-c" v-for="(item,index) in project" :key='item.id' @click.stop="godetails(item,index)">
			<view class="user_pho fx-row-c-c  mr4">
				<view class="label label_bg1" v-if="item.status!=10 && item.subStatus==10" >{{item.tag}}</view>
				<view class="label label_bg2" v-if="item.status!=10 && item.subStatus==20" >{{item.tag}}</view>
				<view class="label label_bg3" v-if="item.status==10" >休息中</view>
				<image class="e_icon" v-if="item.type==20" src="@/static/picture/excellent.png" ></image>
				<view class="picture mr26">
					<image :src="item.workPhoto"  mode='aspectFill'  lazy-load></image> 
				</view> 
			</view>
			<view class="fx-col-sb"  style="width: 448rpx; height: 160rpx;">
				<view class="fx-row-sta">
					<view class="text-beyond ft30 user_name">{{item.name}}</view>
					<view class="user_collect fx-row-sta" @click.stop="collect(item)">
						<image class="mr4" v-if="!item.userCollectionFlag" src="@/static/picture/collect.png"></image>
						<image class="mr4" v-else src="@/static/picture/collect_act.png"></image>
						<span >{{item.followCount}}</span>
					</view>
				</view> 
				<view class="fx-row-sta grey3"> 
					<span class="text-beyond ft24" style="width: 200rpx;">已服务：{{item.selectCount}}单 </span>
				</view> 
				<view class="fx-row-sta mt10 grey3 ft26">
					<view class="fx-row-sta mr26">
						<image style="width: 28rpx;height: 28rpx;margin-right: 6rpx;" src="@/static/picture/grade.png" mode="widthFix" lazy-load></image>
						<span>{{item.score}}</span>
					</view>
					<view class="fx-row-sta ">
						<image style="width: 22rpx;height: 24rpx;margin-right: 6rpx;" src="@/static/picture/address3.png" mode="widthFix" lazy-load></image>
						<span>{{item.distance}}km</span> 
					</view> 
				</view>  
				<view class="item_float  ft18"  v-if="item.status!='10'">最早可约: {{item.appointmentTime}}</view>
				<view class="item_btn" v-if="state=='0'" @click.stop="Selection(item,index)">选择</view>
				<block v-else>
					<view class="item_btn" @click.stop="reserve(item,index)" v-if="item.status!='10'">立即预约</view> 
				</block>
				
				<!-- <view class="item_btn">选择{{state}}</view>  -->
			</view> 
		 </view> 
		 <!-- <view v-if="project.length==0" class="emptys">
		 	 <image src="@/static/picture/empty.png" mode="widthFix" lazy-load></image>
		 	 <view>没有相关技师</view>
		 </view> -->
		</view>
		
	</view>
</template>

<script>
	export default {
		name:"technician-list",
		props:['projectList','state'],
		data() {
			return {
				project:[], 
			};
		},
		watch:{ 
			projectList(newValue, oldValue) {   
				this.project = newValue
			},  
			deep: true // 深度监听父组件传过来对象变化 
		},
		onLoad() { 
		},
		onShow() { 
			
		},
		methods: { 
			// 详情
			godetails(item){
				this.$emit('godetails',item) 
			},
			// 收藏
			collect(item){
				this.$emit('collect',item) 
			},
			// 立即预约
			reserve(item){
				this.$emit('reserve',item) 
			},
			// 选择技师
			Selection(item){
				this.$emit('Selection',item) 
			}
		}
	}
</script>

<style lang="scss">
	.user_item{
		position: relative;
		width:670rpx;
		padding:0 20rpx 12rpx 0;
		margin-bottom: 16rpx;
		background-color: #fff;
		border-radius: 12rpx;
		box-shadow: 0rpx 4rpx 16rpx 0rpx rgba(0,0,0,0.1);
		.user_name{
			max-width: 160rpx;
			font-weight: bold;
		}
		.user_collect{
			margin-left: 12rpx;
			font-size: 24rpx;
			color: #696969;
			image{
				width: 28rpx;
				height: 26rpx;
			}
		}
		.user_pho{
			position: relative;
			width: 208rpx;
			height: 208rpx;
			.e_icon{
				position: absolute;
				width: 100%;
				height: 100%;
				z-index: 2;
			}
		}
		.picture{
			position: relative;
			width: 160rpx;
			height: 160rpx;
			margin: 21rpx auto; 
			border-radius:50%;
			overflow: hidden; 
			z-index: 1;
			image{
				width: 160rpx;
				height: 160rpx;
			} 
		} 
		.label{
			position: absolute; 
			bottom: 8rpx;
			width: 128rpx;
			height: 34rpx;  
			border-radius: 18rpx;
			font-size: 20rpx;
			color: #fff;
			text-align: center;
			line-height: 34rpx;
			z-index: 3;
		}
		.label_bg1{
			background: #24C276;
		}
		.label_bg2{
			background: #FF9023;
		}
		.label_bg3{
			background: #AEAEAE;
		}
		.img_tip{
			width: 20rpx;
			height: 22rpx;
			margin-right: 4rpx;
		}
		.item_float{
			position: absolute;
			right: 20rpx; 
			padding: 10rpx 14rpx;
			// background: rgba(154, 193, 255, .3) ;
			background: $uni-main-near;
			border-radius: 4rpx; 
			color: $uni-main-c;
			font-size: 22rpx;
			// opacity: 0.3;
		}
		.item_btn{
			position: absolute;
			right: 20rpx;
			bottom: 28rpx;
			width: 176rpx;
			height: 50rpx; 
			background-color: $uni-main;
			border-radius: 30rpx;
			text-align: center;
			line-height: 50rpx;
			font-size: 24rpx;
			color: #fff;
		}
	}
</style>